 <template>
	<wrapPopup v-if="isShow" @click.stop.prevent>
		<view class="wrap-password-content flex column align-center">
			<image class="close" :src="$staticImagePath('common/close.png')" @click.stop="onDismiss" />
			<view class="title f-30">请输入支付密码</view>
			
			<view class="wrap-password-input">
				<input class="input" :focus="focus" :value="password" maxlength="6" @input="onInput" type="safe-password" :hold-keyboard="true" :auto-blur="true" cursor-color="#F0f0f0" />
				
				<view class="password-num-bg flex align-center just-between" @click="onShowKeywords">
					<block v-for="(item, index) in 6" :key="index">
						<view class="num-bg flex align-center just-center" @click="onShowKeywords">
							<view class="dot" v-if="password.length > index"></view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="btn-bg flex align-center just-between">
				<view class="f-26" @click="$jump.to('/pages/mine/setting/changePayPassword?title=修改密码')">修改密码</view>
				
				<view class="f-26" @click="$jump.to('/pages/mine/setting/changePayPassword?title=忘记密码')">忘记密码</view>
			</view>
		</view>
	</wrapPopup>
</template>

<script>
	import {checkPayPassword} from "@/API/mine.js";
	import wrapPopup from "@/components/popup/popup.vue"
	export default {
		components: {
			wrapPopup
		},
		props: {
			/**
			 * 是否显示
			 */
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				password: "",
				focus: false, //是否聚焦
			}
		},
		watch: {
			isShow: {
				handler() {
					if (this.isShow === true) {
						setTimeout(() => {
							this.focus = true;
						}, 300);
					} else {
						this.focus = false;
					}
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 销毁
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},
			/**
			 * onShowKeywords
			 */
			onShowKeywords() {
				console.log("AAAAAAAAA");
				setTimeout(() => {
					this.focus = true;
				}, 300);
			},
			/**
			 * 输入
			 */
			onInput(e) {
				this.password = e.detail.value;
				if (this.password.length === 6) {
					this.focus = false;
					// this.$emit("onFinish", this.password)
					checkPayPassword(this.password).then(res => {
						this.onDismiss();
						this.$emit("onFinish", this.password)
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-password-content {
		width: 700rpx;
		background-color: white;
		padding: 50rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
		gap: 40rpx;
		position: relative;
		
		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
		
		.title {
			color: #333333;
		}
		
		.wrap-password-input {
			width: 100%;
			height: 100rpx;
			overflow: hidden;
			position: relative;
			
			.password-num-bg {
				width: 100%;
				height: 100%;
				overflow: hidden;
				background-color: white;
			}
			
			.num-bg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
				overflow: hidden;
				background-color: #F0f0f0;
				
				.dot {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: $theme-color;
				}
			}
			
			.input {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: transparent;
				color: #F0f0f0;
				font-size: 6rpx;
			}
		}
		
		.btn-bg {
			width: 100%;
			overflow: hidden;
			color: #666;
		}
	}
</style>